<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text">
    <ul class="nav">

    </ul>
    <script>
        function myFn(res){
            let navEle = document.querySelector(".nav");
            navEle.innerHTML = '' ;
            res.s.forEach(item=>{
                let liEle = document.createElement("li");
                liEle.innerHTML = item ; 
                navEle.appendChild(liEle);
            });
            console.log(res);
        }
        document.querySelector("input").oninput = function (){
            if( this.value.trim().length ){
                let s = document.createElement("script");
                s.src = `https://suggestion.baidu.com/su?wd=${this.value}&cb=myFn` ;
                document.head.appendChild(s);
            } else {
                let navEle = document.querySelector(".nav");
                navEle.innerHTML = '' ;
            }
        }
    </script>
</body>
</html>